<template>
  <div class="mine-box">
    <van-nav-bar
      title="我的"
      left-arrow
      @click-left="onClickLeft"
      class="nav-bar"
    />
    <van-cell-group class="gap-s">
        <van-cell title="用户名" :value="userName"  class="shadow" />
        <van-cell title="我的ID" :value="userid"  class="shadow" />
        <!-- <van-cell title="当前账户" :value="1"  class="shadow" /> -->
        <van-cell title="用户级别" :value="userObj.rating"  class="shadow" />
        <van-cell title="信用度" class="shadow">
          <van-rate
            v-model="userObj.star"
            :size="15"
            :count="6"
            slot="right-icon"
            readonly
          />
        </van-cell>

        <van-cell title="奖池排名" :value="'等待开放' || userObj.tk_pool_rating"  class="shadow" />
        <van-cell title="USDT地址" :value="userObj.tc_address"  class="shadow" />
        <!--<van-cell title="支付宝密码" :value="1"  class="shadow" />-->
        <!--<van-cell title="用户反馈" :value="1"  class="shadow" />-->
        <van-cell title="在线客服" :value="'等待开放' || userObj.helpdesk"  class="shadow" />
        <van-cell title="联系我们" :value="userEmail"  class="shadow" />
    </van-cell-group>
      <van-button @click="loginOut" class="logout">退出登录</van-button>

    <van-tabbar class="new-bo-nav" style="z-index:9999;height: 62px;background: #000;">
      <van-tabbar-item>
        <router-link :to="{ path: '/game' }" exact>
          <img src="static/img/game/ball.png" class="tabbar-img">
          首页
        </router-link>
      </van-tabbar-item>

      <van-tabbar-item>
        <router-link :to="{ path: '/wallet' }">
          <img src="static/img/game/discover.png" class="tabbar-img">
          钱包
        </router-link>
      </van-tabbar-item>

      <van-tabbar-item>
        <router-link :to="{ path: '/my' }">
          <img src="static/img/game/mine-tab.png" class="tabbar-img">
          我的
        </router-link>
      </van-tabbar-item>
    </van-tabbar>
    </div>
</template>

<script>
  import { Toast } from 'vant';
  import { Dialog } from 'vant';
  export default {
    data(){
      return {
        showChangeName: false,
        showChangePhone:false,
        showImgChoose: false,
        myCroppa: {},
        config: {
          value: 'https://www.baidu.com',
          imagePath: './examples/assets/logo.png',
          filter: 'color'
        },
        erweimaControl:true,
        islogin:false,
        downloadButton: false,
        //  用户账l号信息
        accountList: [],

        //用户号码
        hideNum:null,

        //  绑定微信授权flag
        bindIndex: false,

        bindTitle:'待绑定',
        // 用户头像
        userAvatar:'',
        //  版本参数
        param_uuid:null,

        param_scource:null,

        nickname:"",
        usermobile:"",
        imgsrc:"",
        userid:"",
        userObj:{},
        userEmail:"",
        userName: '',
        lastPageUrl:""
      }
    },
    created(){

    },
    mounted(){
      if(!sessionStorage.getItem("usermessage")) {
        //this.$router.push('/login');
      }
      this.lastPageUrl = sessionStorage.getItem("lastAndNowPage").split('-')[1];
      sessionStorage.setItem("lastAndNowPage",this.lastPageUrl+"-/my")
      token_g = JSON.parse(sessionStorage.getItem("usermessage")).token;
       this.$axios({
          method: "PATCH",
          url: url_g + "/user/",
          headers: {
          'Authorization': 'Bearer ' + token_g
          }
        }).then((res) => {
          if(res && res.data){
            this.userid = res.data.ref_code;
            this.userName = res.data.nick_name;
            this.getMyUser();
          }
        }).catch((e)=>{
          this.getMyUser();
          Toast('您输入的信息有误或网络有问题，请检查重试！');
        })
         let cont = {
        type:'CONTACT_US'
      }
      this.$axios({
        method: 'GET',
        url: url_g + '/config/',
        params: cont,
        headers: {
          'Authorization': 'Bearer ' + token_g
        }
      }).then((res) => {
        if(res && res.data && 0 < res.data.results.length){
          this.userEmail = res.data.results[0].value;
        }
      }).catch((e) => {
              Toast(e.response.data.detail);
      });

    },
    methods:{
      onClickLeft() {
        this.$router.push('/game')
      },
      getMyUser() {
        if(!token_g) {
          Dialog.alert({
            message: '请先登录'
          }).then(() => {
            // on close
          });
          return false
        } else {
          // 头部信息
          this.$axios({
            method: 'POST',
            url: url_g + '/aboutme/',
            headers: {
              'Authorization': 'Bearer ' + token_g
            }
          }).then((res) => {
            console.log(res)
            if(res.data) {
              // this.userObj = res.data.data
              let data = res.data.data
              switch(data.rating) {
                case '1':
                  data.rating = '有效节点'
                  break;
                case '2':
                  data.rating = '重要节点'
                  break;
                case '3':
                  data.rating = '超级节点'
                  break;
                case '4':
                  data.rating = '全球节点'
                  break;
              }

              data.star = parseInt(data.credit_rate / (100 / 6))
              this.userObj = data
            }
          }).catch((e) => {
              Toast(e.response.data.detail);
          })
        }
      },
      loginOut() {
        this.$axios({
          method: "POST",
          url: url_g + "/logout/",
          headers: {
            'Authorization': 'Bearer ' + token_g
          }
        }).then((res) => {
          this.$router.push('/login');
          sessionStorage.setItem("usermessage","")
        }).catch((e)=>{
              Toast(e.response.data.detail);
        })
      },
    }
  }
</script>

<style scoped>

.mine-box {
  height: 100vh;
  background: -webkit-linear-gradient( top,#028aed,#273eec);
  color: #fff;
}
.nav-bar {
  color: #000;
}
.van-cell-group {
  background-color: transparent;
}
.shadow {
  background-color: transparent;
  color: #fff;
}
.logout {
  display: block;
  width: 90%;
  margin: 20px auto;
  border: 1px solid #fff;
  background-color: transparent;
  color: #fff;
}
.new-bo-nav a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 12px;
}
.tabbar-img {
  width: 20px;
  height: 20px;
  margin-bottom: 5px;
}
</style>
